<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>这是一个一个一个购物车啊</title>

        <script>

            var bookArray = [
                {
                    code: 1,
                    name: "软件开发沉思录",
                    author: "张冬阳",
                    price: 39.50,
                    publicDate: '2020年09月',
                    img: "../img/kunkun1.jpg"
                },
                {
                    code: 2,
                    name: "十年编程经验",
                    author: "罗华影",
                    price: 45.00,
                    publicDate: '2023年01月',
                    img: '../img/kunkun2.jpg'
                },
                {
                    code: 3,
                    name: "php和mysql web开发",
                    author: "李昕宇",
                    price: 45.80,
                    publicDate: '2021年08月',
                    img: "../img/kunkun3.jpg"
                },
                {
                    code: 4,
                    name: "sql server编程",
                    author: "张屹山",
                    price: 29.00,
                    publicDate: '2022年11月',
                    img: '../img/kunkun4.jpg'
                },
                {
                    code: 5,
                    name: "深入简出Java",
                    author: "鲜继文",
                    price: 45.00,
                    publicDate: '2021年11月',
                    img: '../img/kunkun5.jpg'
                },
                {
                    code: 6,
                    name: "程序员的养生之道",
                    author: "王稀铮",
                    price: 27.00,
                    publicDate: '2020年05月',
                    img: '../img/kunkun6.jpg'
                }
            ]

            let choices = [];

            function $(id) {
                return document.getElementById(id);
            }

            window.onload = function () {
                initTable(bookArray);
            };

            function initTable(arr) {
                var str = "";
                arr.forEach((n) => {
                    str += `<tr><td class="imgTd"><img src="${n.img}"></td>
                            <td>${n.name}</td>
                            <td>${n.author}</td>
                            <td>${parseFloat(n.price)}</td>
                            <td><input type="button" value="查看" onclick="showBookDetails(${n.code})"><span> </span><input type="button" value="加入购物车" onclick="addBook('${n.name}')"></td></tr>`;
                });
                $("data").innerHTML = str;
            }

            function showBookDetails(index) {
                let book = bookArray[index - 1];
                $("bookName").innerText = book.name;
                $("bookAuthor").innerText = book.author;
                $("bookPublicDate").innerText = book.publicDate;
                $("bookPrice").innerText = book.price;
                $("bookImg").src = book.img;
                $("book").style.visibility = "visible";
            }


            function searchBooks() {
                let searchTerm = $("search").value.trim();
                let filteredBooks = bookArray.filter(book => {
                    return searchTerm === "" || book.name.includes(searchTerm);
                });
                initTable(filteredBooks);
            }


            //加书
            function addBook(name) {
                let shopObj = choices.find(n => n.name == name);

                if (shopObj != undefined) {
                    shopObj.num++;
                } else {
                    let book = bookArray.find(n => n.name == name);
                    choices.push({name: name, price: book.price, num: 1});
                }

                initShopCart();
                document.getElementById("higher").style.visibility = 'visible'
                document.getElementById("shopDiv").style.visibility = 'visible'
            }

            //删除书籍


            function delBook(bookName) {
                // 从购物车数组中查找要删除的书籍对象
                let index = choices.findIndex((book) => book.name == bookName);

                // 如果找到了该书籍，从数组中删除它
                choices.splice(index, 1);
                // 更新购物车表格
                initShopCart();

            }

            function stopChoice() {
                document.getElementById("higher").style.visibility = 'hidden'
                document.getElementById("shopDiv").style.visibility = 'hidden'
            }


            function initShopCart() {
                var str = "";
                let totalMoney = 0;
                choices.forEach(n => {
                    str += `<tr>
                    <td>${n.name}</td>
                    <td>${n.price}</td >
                    <td><input type="number" value="${n.num}" onchange="updateNum('${n.name}', this.value)"></td>
                    <td>${n.price * n.num}</td>
                    <td><input type="button" value="删除" onclick="delBook('${n.name}')"></td>
                    </tr>`;
                    totalMoney += n.price * n.num;
                });
                $("shopData").innerHTML = str;
                $("priceNum").innerText = totalMoney;
            }

            /**
             *
             * @param name
             * @param num
             */
            function updateNum(name, num) {
                let shopObj = choices.find(n => n.name == name);
                shopObj.num = parseInt(num);
                initShopCart();
            }


        </script>
        <style>
            *::-webkit-scrollbar {
                display: none;
            }

            caption {
                border: 1px solid #000000;
            }

            table {
                position: relative;
                left: 30%;
                border: 1px solid #000000;
                width: 700px;
            }

            table tbody {
                overflow-y: scroll;
            }

            th {
                border: 1px solid #000000;
            }

            td {
                border: 1px solid #000000;
            }

            #data img {
                display: inline-block;
                width: 20px;
                height: 20px;
            }

            .imgTd {
                width: 20px;
                height: 20px;
            }

            #searchDiv {
                position: relative;
                top: 10px;
                left: 40%;
            }

            #searchButton {
                background-color: orange;
            }

            #book {
                visibility: hidden;
                position: absolute;
                top: 90px;
            }

            #book img {
                position: relative;
                display: flex;
                bottom: 70px;
                right: -300px;
                width: 70px;
                height: 70px;
            }

            #shopDiv {
                visibility: hidden;
                background-color: #fefbea;
                width: 50%;
                height: 300px;
                position: relative;
                top: 300px;
                left: 420px;
            }

            #shopAct {
                position: relative;
                top: 10px;
                left: 360px;
            }

            #shopAct input {
                height: 100%;

                background-color: #eee8aa;
            }

            #higher {
                visibility: hidden;
                position: absolute;
                top: 0px;
                background-color: #b2b2b2;
                opacity: .6;
                width: 100%;
                height: 100%;
            }

            #shopTable {
                position: relative;
                width: 100%;
                left: 0px;
            }
        </style>
    </head>
    <body>
        <table>
            <caption>图书一览</caption>
            <thead>
                <th></th>
                <th>图书名</th>
                <th>作者</th>
                <th>销售价</th>
            </thead>
            <tbody id="data"></tbody>
        </table>
        <div id="searchDiv">
            <span>图书名</span><input id="search" type="text">
            <input id="searchButton" onclick="searchBooks()" type="button" value="查询">
        </div>
        <div id="book">
            <div>图书名:<span id="bookName"></span></div>
            <div>作者:<span id="bookAuthor"></span></div>
            <div>出版时间:<span id="bookPublicDate"></span></div>
            <div>售价:<span id="bookPrice"></span></div>
            <img id="bookImg">
        </div>
        <div id="higher">
            <div id="shopDiv">
                <table id="shopTable">
                    <thead>
                        <tr>
                            <th>商品名</th>
                            <th>单价</th>
                            <th>数量</th>
                            <th>总价</th>
                            <th>移出商品</th>
                        </tr>
                    </thead>
                    <tbody id="shopData">
                    </tbody>
                </table>
                <div id="shopAct">
                    <input id="back" onclick="stopChoice()" type="button" value="继续购物"><span id="allPrice">总价:<span
                        id="priceNum"></span></span>
                </div>
            </div>
        </div>

    </body>
</html>